<div class="form-div">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="kWarning">
        <span>
          黑色预警值
          <i nz-icon nz-tooltip nzTitle="默认预警值，可修改" type="question-circle" theme="outline"></i>
        </span>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-input-number style="width:100%;" formControlName="kWarning" [nzMin]="0" [nzMax]="100" [nzPrecision]="0.1" [nzFormatter]="formatterPercent" [nzParser]="parserPercent" [nzPlaceHolder]="'请输入黑色预警值'"></nz-input-number>
        <nz-form-explain class="checkResult" *ngIf="validateForm.get('kWarning').dirty && validateForm.get('kWarning').errors">请输入黑色预警值!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="cWarning">青色预警值</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-input-number style="width:100%;" nz-input formControlName="cWarning" [nzMin]="0" [nzMax]="100" [nzPrecision]="0.1" [nzFormatter]="formatterPercent" [nzParser]="parserPercent" [nzPlaceHolder]="'请输入青色预警值'"></nz-input-number>
        <nz-form-explain class="checkResult" *ngIf="validateForm.get('cWarning').dirty && validateForm.get('cWarning').errors">请输入青色预警值!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="mWarning">红色预警值</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-input-number style="width:100%;" formControlName="mWarning" [nzMin]="0" [nzMax]="100" [nzPrecision]="0.1" [nzFormatter]="formatterPercent" [nzParser]="parserPercent" [nzPlaceHolder]="'请输入红色预警值'"></nz-input-number>
        <nz-form-explain class="checkResult" *ngIf="validateForm.get('mWarning').dirty && validateForm.get('mWarning').errors">请输入红色预警值!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="yWarning">黄色预警值</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-input-number style="width:100%;" formControlName="yWarning" [nzMin]="0" [nzMax]="100" [nzPrecision]="0.1" [nzFormatter]="formatterPercent" [nzParser]="parserPercent" [nzPlaceHolder]="'请输入黄色预警值'"></nz-input-number>
        <nz-form-explain class="checkResult" *ngIf="validateForm.get('yWarning').dirty && validateForm.get('yWarning').errors">请输入黄色预警值!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-row style="margin-bottom:8px;">
      <nz-form-control [nzSpan]="14" [nzOffset]="6" style="text-align:center;">
        <button nz-button nzType="primary" (click)="setConfig()" style="margin:0 100px 0 -50px;">提交</button>
        <button nz-button nzType="primary" (click)="cancel()">取消</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>

